<template>
  <div id="container">
    <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="this is .vue 组件" :age="18" />
    <hr />
    <h2>data: {{ name1 }}</h2>
    <h2>setup: {{ name2 }}</h2>
    <h2>reactive: {{ state.name3 }}</h2>
    <h2>ref: {{ name4 }}</h2>
    <h2>computedRef: {{ name5 }}</h2>
    <h2>ageRef:{{ age }}</h2>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default defineComponent({
  name: "App",
  components: {
    HelloWorld,
  },
  mounted() {
    console.log("mounted ->", this.age);
  },
  // setup 只运行一次：
  setup(props, { slots, attrs, emit }) {
    let name2 = "alice";
    const state = reactive({ name3: "jack" });
    const nameRef = ref("goudan");
    const ageRef = ref(18);
    setInterval(() => {
      name2 += "1";
      state.name3 += "1";
      // {value:xxx}
      nameRef.value += "1";
    }, 5000);

    const computedNameRef = computed(() => {
      return nameRef.value + "2";
    });

    setInterval(() => {
      ageRef.value += 1;
    }, 1000);

    watchEffect(() => {
      console.log(computedNameRef.value);
    });

    return {
      name2,
      state,
      name4: nameRef,
      name5: computedNameRef,
      age: ageRef,
    };
  },
  data() {
    return {
      name1: "tom",
    };
  },
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
